<template>
  <aside class="sidebar">
    <el-scrollbar style="width: 100%;height: 100%">
    <nav class="nav-links">
      <template v-for="(nav, index) in routes">
        <div :key="nav.name" v-if="nav.name !== 'Home'" :class="['nav-item', {show: index === activeIndex}]" @click="tapItem(index)">
        {{ nav.meta.title }}
        <div class="nav-item__childs">
          <router-link v-for="child in nav.children" :key="child.name" class="nav-item__child" :to="{name: child.name}">
            {{ child.meta.title }}
          </router-link>
        </div>
      </div>
      </template>
    </nav>
    <div class="art-list">
      <router-link v-for="item in articleList" :key="item.name" :to="{name: item.name}" class="art-item" @click="$emit('hide-menu')">{{ item.meta.title }}</router-link>
    </div>
    </el-scrollbar>
  </aside>
  <div class="sidebar-mask" @click="$emit('hide-menu')"></div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { routes } from '@/router/index'
import { mapGetters } from 'vuex'
export default defineComponent({
  name: 'MainSidebar',
  emits: {
    'hide-menu': null
  },
  data () {
    return {
      routes,
      articleRoutes: [],
      activeIndex: -1,
      rootPath: ''
    }
  },
  computed: {
    ...mapGetters('layout', ['articleList'])
  },
  methods: {
    tapItem (i: number) {
      this.activeIndex = i === this.activeIndex ? -1 : i
    },
    selectArt (arr: any, path: string) {
      if (!arr || arr.length === 0) {
        this.$router.push(path)
        this.$emit('hide-menu')
      } else {
        this.articleRoutes = arr
        this.rootPath = path
      }
    }
  }
})
</script>
<style lang="scss">
.sidebar {
  position: fixed;
  top: 55px;
  left: 0;
  width: 298px;
  height: calc(100% - 55px);
  z-index: 10;
  background-color: #fff;
  border-right: 1px solid #eaecef;
  transition: transform .2s ease;
  .nav-links {
    display: none;
    padding: 8px 0 12px;
    border-bottom: 1px solid #eaecef;
  }
  .nav-item {
    margin: 0;
    display: block;
    padding: 8px 0 8px 24px;
    line-height: 22px;
  }
}
.sidebar-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
  display: none;
}
.sidebar-open {
  .sidebar {
    transform: translateX(0);
  }
  .sidebar-mask {
    display: block;
  }
}
.art {
  &-list {
    margin: 0;
    padding: 0;
  }
  &-item {
    font-size: 1em;
    font-weight: 400;
    display: inline-block;
    color: #2c3e50;
    border-left: .25rem solid transparent;
    padding: .35rem 1rem .35rem 1.25rem;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 719px) {
  .sidebar {
    display: block;
    width: 70%;
    transform: translateX(-100%);
    .nav-links {
      display: block;
    }
  }
  .sidebar-open .sidebar-mask {
    display: block;
  }
}
</style>
